<template>
	<view class="" style="padding-bottom: 200rpx;">
		<Header :title="info.title" :isHome="true" :isWhite='true'></Header>
		<view class="topOn">
			<view class="">
				<span class="schedule">答题进度</span>
				<span class="count">{{count+1}}</span>
				<span class="totalCount" v-if="info.quantity">/{{info.quantity}}</span>
			</view>
			<view class="">
				<span class="countdownTitle">倒计时间</span>
				<span class="countdownSeconds">{{ countdownSeconds }}s</span>
			</view>
		</view>
		<view class="">
			<view class="main" :key="index">
				<!-- <view class="" style="display: flex;align-items: center;"> -->
				<span class="typeLogo" v-if="subjectList[count].answer_type=='FILL'">
					填空题
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='JUDGE'">
					判断题
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='ONE'">
					单选
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='MANY'">
					多选
				</span>
				<span class="title" v-if="subjectList[count].topic">{{count+1}}、{{subjectList[count].topic}}<!-- <rich-text
							:nodes="subjectList[count].topic"></rich-text> --></span>

				<!-- <span class="title" v-if="(showMath||showEnglish)&&subjectList[count].answer_type=='FILL'"
					style="margin-right: 10rpx;">=?</span> -->

				<span class="title" v-if="subjectList[count].score">({{subjectList[count].score}}分)</span>
				<!-- </view> -->

				<!-- 填空选项 -->
				<span class="title" v-if="subjectList[count].answer_type=='FILL'"
					style="margin-right: 10rpx; margin-top: 40rpx;display: flex;align-items: center;">请输入答案： <input
						type="text" v-model="chooseanswer[count]"
						style="width: 50%;border-bottom: 1px solid #000;padding: 0 20rpx;" /> </span>

				<!-- 展示题目图片 -->
				<view class="" v-if="subjectList[count].images" v-for="i in subjectList[count].images">
					<image :src="imgUrl+i" mode="" class="textbook"></image>
				</view>

				<!-- 数字键盘 -->
				<view class="chapterAll" v-if="showMath && subjectList[count].answer_type=='FILL'">
					<view class="chapterMath" v-for="(itm,inx) in numList" :key="inx" @click="chooseNum(itm)">
						<view style="display: flex;align-items: center;justify-content: center;">
							<image v-if="itm.num=='X'" src="../../static/del.png" mode="" class="del"></image>
							<view class="" v-else>
								{{itm.num}}
							</view>
							<image src="/static/one.png" mode="" class="one"></image>
						</view>
					</view>
				</view>
				<!-- 英文键盘 -->
				<view class="chapterAll1" v-if="showEnglish && subjectList[count].answer_type === 'FILL'">
					<view class="chapterEnglish" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
						<view class="key" v-for="(key, keyIndex) in row" :key="keyIndex" @click="chooseKey(key)"
							:style="key=='del'||key=='.'?'width:80rpx;':''">
							<view style="display: flex;align-items: center;justify-content: center;">
								<image v-if="key=='del'" src="../../static/del.png" mode="" class="del"></image>
								<view class="" v-else>
									{{key}}
								</view>
								<image src="/static/one.png" mode="" class="tow"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 多选 -->
				<view v-if="subjectList[count].answer_type === 'MANY'">
					<view :class="isSelectedMany(inx)?'chapter-active':'chapter'"
						v-for="(itm,inx) in subjectList[count].option" :key="inx" @click="chooseAnswerMany(itm,inx)">
						<view class="flex">
							<view class="">
								{{inx}}.{{itm}}
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
						</view>
					</view>
				</view>
				<!-- 单选 -->
				<view v-else>
					<view :class="isSelectedOne(inx)?'chapter-active':'chapter'"
						v-for="(itm,inx) in subjectList[count].option" :key="inx" @click="chooseAnswer(itm,inx)">
						<view class="flex">
							<view class="">
								{{inx}}.{{itm}}
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="bottom"
				v-if="subjectList[count].answer_type=='MANY' || subjectList[count].answer_type=='FILL'">
				<view class="submitBtn" @click="submitAnswer()">
					提交答案
				</view>
			</view>

			<!-- 失利 -->
			<view>
				<u-popup :show="show" :round="12" mode="center" @close="close" @open="show=true">
					<view class="popContent">
						<view class="">
							<image src="/static/lose.png" mode="" class="qr"></image>
						</view>
						<view class="title">闯关失利</view>
						<view class="popCon">
							请再接再厉哦！
						</view>
						<view class="allBtn">
							<view class="fanhui" @click="goBack">
								返回
							</view>
							<view class="continue"
								@click="goPage('/subpages/banner/basicexamination?id='+id+'&subject_id='+subjectId+'&grade_id='+gradeId)">
								继续闯关
							</view>
						</view>
						<view class="boardAll" @click="getRanking()">
							<image src="/static/board.png" mode="" class="board"></image>
							<view>排行榜</view>
							<image src="/static/toright.png" mode="" class="toright"></image>
						</view>
					</view>
				</u-popup>
			</view>

			<!-- 成功 -->
			<view>
				<u-popup :show="showSuccess" :round="12" mode="center" @close="close" @open="showSuccess=true">
					<view class="popContent" style="height: 667rpx;">
						<view class="">
							<image src="/static/success.png" mode="" class="qr"></image>
						</view>
						<view class="title">闯关成功</view>
						<view class="popCon">
							今天的你又超过了昨天的自己!!
						</view>
						<view class="allBtn">
							<view class="fanhui" @click="goBack">
								返回
							</view>
							<view class="continue" @click="getRanking()">
								查看排行{{ countSeconds }}s
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	const innerAudioContext = uni.createInnerAudioContext();
	// innerAudioContext.src = '/static/youareright.mp3';
	innerAudioContext.autoplay = false;
	export default {
		data() {
			return {
				id: '',
				imgUrl: img_url,
				countdownSeconds: 30,
				countSeconds: 5,
				show: false,
				showSuccess: false,
				isCurrentQuestionAnswering: true,
				accumulatedAnswer: '',
				mainAnswer: '',
				title: '题目标题',
				count: 0,
				totalCount: 4,
				showMath: false, //是否显示数字键盘
				showEnglish: false, //是否显示英语键盘
				fillAnswer: '',
				start_time: '',
				end_time: '',
				keyboardLayout: [
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
					['.', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del']
				],
				numList: [{
						num: 1,
					},
					{
						num: 2,
					},
					{
						num: 3,
					},
					{
						num: 4,
					},
					{
						num: 5,
					},
					{
						num: 6,
					},
					{
						num: 7,
					},
					{
						num: 8,
					},
					{
						num: 9,
					},
					{
						num: '.',
					},
					{
						num: 0,
					},
					{
						num: 'X',
					}
				],
				info: {},
				selectedAnswer: {}, // 存储单选答案
				selectedAnswers: [], // 存储多选答案
				subjectList: [],
				subjectId: '',
				gradeId: '',
				chooseanswer: [],
				selectedAnswersMap: {},
			}
		},
		onLoad(options) {
			console.log(innerAudioContext, 'innerAudioContext');
			this.startCountdown()
			this.id = options.id
			if (options.subject_id) {
				this.subjectId = options.subject_id
			}
			if (options.grade_id) {
				this.gradeId = options.grade_id
			}
			this.getPaperInfo()
			console.log(options, '111');
			this.getMusic()
			this.start_time = this.getCurrentTime();
		},
		methods: {
			chooseNum(itm) {
				if (itm.num === 'X') {
					this.accumulatedAnswer = ''
					this.chooseanswer[this.count] = ''
				} else {
					const currentAnswer = itm.num
					this.accumulatedAnswer += currentAnswer
					this.chooseanswer[this.count] = this.accumulatedAnswer
				}
			},
			chooseKey(key) {
				if (key === 'del') {
					this.accumulatedAnswer = this.accumulatedAnswer.slice(0, -1);
					this.chooseanswer[this.count] = this.chooseanswer[this.count].slice(0, -1);
				} else {
					const currentAnswer = key
					this.accumulatedAnswer += currentAnswer
					this.chooseanswer[this.count] = this.accumulatedAnswer
				}
			},
			initAnswers() {
				this.chooseanswer = {};
				for (let i = 0; i < this.subjectList.length; i++) {
					if (this.subjectList[i].answer_type == 'MANY') {
						// 多选题，初始化为空数组
						this.chooseanswer[i] = [];
					} else {
						// 单选题，初始化为空字符串
						this.chooseanswer[i] = '';
					}
				}
				console.log(this.chooseanswer);
			},
			getPaperInfo() {
				get('/paper/get_paper_info?paper_id=' + this.id).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.subjectList = res.data.questions
						if (res.data.subject_name == '数学') {
							this.showMath = true
						}
						if (res.data.subject_name == '英语') {
							this.showEnglish = true
						}
						this.initAnswers()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 3000
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 3000);
					}
				})
				// .catch(err => {
				// 	uni.showToast({
				// 		title: '请求失败',
				// 		icon: 'error'
				// 	})
				// 	setTimeout(function() {
				// 		uni.navigateBack()
				// 	}, 500);
				// });
			},
			getRanking() {
				const info = {
					module_id: this.info.module_id,
					subject_id: this.info.subject_id,
					grade_id: this.info.grade_id
				}
				uni.navigateTo({
					url: '/subpages/banner/leaderboard?info=' + JSON.stringify(info)
				})
			},
			radioChange(e) {
				console.log(e, 'eee');
			},
			submit() {
				uni.navigateTo({
					url: '/subpages/banner/practiceResult'
				})
			},
			startCountdown() {
				const timer = setInterval(() => {
					if (this.countdownSeconds > 0) {
						this.countdownSeconds--;
					} else {
						this.show = true
					}
				}, 1000);
			},
			startCount() {
				const timer = setInterval(() => {
					if (this.countSeconds > 0) {
						this.countSeconds--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},
			// 填空 和 多选
			submitAnswer() {
				if (this.subjectList[this.count].answer_type == "MANY") {
					// this.chooseanswer[this.count] = this.selectedAnswers;
					this.chooseanswer[this.count] = this.selectedAnswersMap[this.count]
					console.log(this.chooseanswer);
					// var answer = this.selectedAnswers
					var answer = this.chooseanswer[this.count];
				} else {
					// var answer = this.fillAnswer
					// this.chooseanswer[this.count] = this.fillAnswer;
					console.log(this.chooseanswer);
					var answer = this.chooseanswer[this.count]
				}
				var questionIndex = this.count; // 假设当前显示的是第 count 道题
				if (Array.isArray(answer)) {
					var q_answer = JSON.parse(this.subjectList[questionIndex].answer)
				} else {
					var q_answer = this.subjectList[questionIndex].answer
				}
				this.end_time = this.getCurrentTime();
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: answer,
						answer_type: this.subjectList[questionIndex].answer_type
					}).then(res => {
						if (res.code == 1) {
							this.countdownSeconds = 30
							get('/paper/refresh_ranking?as_id=' + res.data.as_id).then(res => {})
								.catch(err => {
									console.error('GET 请求失败:', err);
								});
							if (res.data == 2) {
								this.show = true
							} else if (this.count + 1 < this.info.questions.length) {
								innerAudioContext.stop()
								innerAudioContext.play();
								this.count++;
							} else {
								innerAudioContext.stop()
								innerAudioContext.play();
								this.showSuccess = true
								this.getPaperall()
								this.startCount()
							}
						} else {
							this.show = true
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 检查单选是否选中
			isSelectedOne(index) {
				return this.selectedAnswer[this.count] === index;
			},
			// 检查多选是否选中
			isSelectedMany(index) {
				return this.selectedAnswersMap[this.count] && this.selectedAnswersMap[this.count].includes(index);
				// return this.selectedAnswers.includes(index);
			},
			// 多选
			chooseAnswerMany(option, index) {
				if (!this.selectedAnswersMap[this.count]) {
					this.selectedAnswersMap[this.count] = [];
				}
				const indexInSelected = this.selectedAnswersMap[this.count].indexOf(index);
				if (indexInSelected > -1) {
					// 已选中，取消选择
					this.selectedAnswersMap[this.count].splice(indexInSelected, 1);
				} else {
					// 未选中，添加选择
					this.selectedAnswersMap[this.count].push(index);
				}

				// const indexInSelected = this.selectedAnswers.indexOf(index);
				// if (indexInSelected > -1) {
				// 	// 已选中，取消选择
				// 	this.selectedAnswers.splice(indexInSelected, 1);
				// } else {
				// 	// 未选中，添加选择
				// 	this.selectedAnswers.push(index);
				// }
			},
			// 单选
			chooseAnswer(itm, idx) {
				this.selectedAnswer[this.count] = idx;
				this.chooseanswer[this.count] = this.selectedAnswer[this.count]
				console.log(this.chooseanswer);
				this.$forceUpdate();
				var questionIndex = this.count; // 假设当前显示的是第 count 道题
				if (Array.isArray(idx)) {
					var q_answer = JSON.parse(this.subjectList[questionIndex].answer)
				} else {
					var q_answer = this.subjectList[questionIndex].answer
				}
				this.end_time = this.getCurrentTime();
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: idx,
						answer_type: this.subjectList[questionIndex].answer_type
					}).then(res => {
						this.countdownSeconds = 30
						if (res.data == 2) {
							this.show = true
						} else if (this.count + 1 < this.info.quantity) {
							innerAudioContext.stop()
							innerAudioContext.play();
							this.count++;
						} else {
							innerAudioContext.stop()
							innerAudioContext.play();
							this.showSuccess = true
							this.getPaperall()
							this.startCount()
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getPaperall() {
				post('/paper/submit_paperall', {
						start_time: this.start_time,
						end_time: this.end_time,
						timetoken: this.info.timetoken,
						paper_id: this.id,
						answer: this.chooseanswer
					}).then(res => {
						if (res.code == 1) {
							get('/paper/refresh_ranking?as_id=' + res.data.as_id).then(res => {})
								.catch(err => {
									console.error('GET 请求失败:', err);
								});
						} else {
							uni.showToast({
								title: res.msg
							})
						}

					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getMusic() {
				get('/system/get_music').then(res => {
					if (res.code == 1) {
						innerAudioContext.src = this.imgUrl + res.data
					} else {}
				})
			},
			goBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// chooseNum(itm) {
			// 	console.log(itm, 'itm111');
			// 	const rightAnswer = this.subjectList[this.count].rightAnswer
			// 	let currentAnswer = itm.num || "";
			// 	this.accumulatedAnswer += currentAnswer;
			// 	this.mainAnswer = this.accumulatedAnswer;
			// 	if (this.mainAnswer == rightAnswer) {
			// 		innerAudioContext.play();
			// 		console.log('123123');
			// 		setTimeout(() => {
			// 			this.count++
			// 			console.log(this.accumulatedAnswer, this.mainAnswer, 'this.mainAnswer');
			// 		}, 500);

			// 	} else if (this.mainAnswer.length != rightAnswer.length) {
			// 		setTimeout(() => {
			// 			console.log(this.mainAnswer, this.accumulatedAnswer, 'jisuan111');
			// 			this.show = true
			// 		}, 2000);
			// 	} else if (this.mainAnswer.length == rightAnswer.length && this.mainAnswer != rightAnswer) {
			// 		console.log('pppp');
			// 		setTimeout(() => {
			// 			this.show = true
			// 		}, 500);
			// 	}
			// },
			// 获取当前时间
			getCurrentTime() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
				const day = currentDate.getDate().toString().padStart(2, '0');
				const hours = currentDate.getHours().toString().padStart(2, '0');
				const minutes = currentDate.getMinutes().toString().padStart(2, '0');
				const seconds = currentDate.getSeconds().toString().padStart(2, '0');
				// const milliseconds = currentDate.getMilliseconds().toString().padStart(3, '0');

				// 组装成字符串
				const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return timeString;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.chapterAll1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;

		.chapterEnglish {
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}

		.key {
			background: #FFFFFF;
			border: 3rpx solid #222222;
			border-radius: 12rpx;
			position: relative;
			box-sizing: border-box;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			width: 60rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
			cursor: pointer;
		}

		.del {
			height: 34rpx;
			width: 44rpx;
		}

		.tow {
			width: 21rpx;
			height: 34rpx;
			position: absolute;
			top: -10rpx;
			right: 5rpx;
		}
	}



	.boardAll {
		width: 196rpx;
		height: 64rpx;
		background: #F5F5F5;
		border: 1rpx solid #DDDDDD;
		border-radius: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 24rpx;
		color: #222222;
		margin: 20rpx auto;

		view {
			margin-right: 10rpx;
		}

		.board {
			width: 36rpx;
			height: 36rpx;
			display: block;
			margin-right: 20rpx;
		}

		.toright {
			width: 24rpx;
			height: 24rpx;
			display: block;
		}
	}

	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 524rpx;
			height: 222rpx;
			margin-top: 50rpx;
		}

		.allBtn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			view {
				width: 239rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.fanhui {
				margin-right: 20rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
			}

			.continue {
				background: #FFD275;
			}
		}
	}

	.chapterAll {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.del {
			height: 48rpx;
			width: 64rpx;
		}
	}

	.chapterMath {
		width: 212rpx;
		text-align: center;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;


	}

	.chapter {
		width: 686rpx;
		text-align: center;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;


	}


	.one {
		width: 21rpx;
		height: 34rpx;
		position: absolute;
		top: -12rpx;
		right: 21rpx;
	}

	.chapter-active {
		width: 686rpx;
		text-align: center;
		background: #ffebc2;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
	}




	.topOn {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx;
		background-color: #fff;
		position: sticky;

		.schedule {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.count {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.totalCount {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.countdownTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.countdownSeconds {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #F54040;
		}
	}

	.main {
		padding: 30rpx;

		.uni-list-cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background-color: #fff;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.typeLogo {
			background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
			border-radius: 4rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #222222;
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.three {
			width: 66rpx;
			height: 34rpx;
			position: absolute;
			top: -12rpx;
			right: 54rpx;
		}
	}

	.textbook {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto 0;
		border-radius: 20rpx;
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 20rpx auto 0;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.count {
				color: #222222;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 600;
				line-height: 36rpx;
			}

			.totalCount {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 400;
			}

			.changeBtn {
				margin: 0 auto;
				width: 80%;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				// margin-right: 20rpx;
				border: 2rpx solid #222222;
				border-radius: 8rpx;
			}

			.changeBtndis {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #CCCCCC;
			}
		}

		.bottom-flex {
			display: flex;
			width: 100%;
		}
	}
</style>